<template>
  <div class="netBox wrap scrollBar">
    <div class="topCon">
      <div class="title">系统重启</div>
      <div class="resetCon">
        <el-button type="primary" @click="sysReset">系统重启</el-button>
        <div class="hint"><b>提示:</b> 系统重启期间业务将无法使用 !</div>
      </div>
    </div>
    <!-- 确认框 -->
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="400px"
      center
      custom-class="confirmInfo"
      top="30vh"
      :close-on-click-modal='false'
    >
      <div slot="title" class="header-title">
        <img src="~@/assets/images/iconAll/titleTip.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div style="margin-bottom: 5px">XMCU系统即将重启,系统重启期间业务</div>
      <div>将无法使用,是否继续!</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="fou" @click="reStart(1)">否</el-button>
        <el-button type="shi" @click="reStart(2)">是</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/baseConfig.less";
import { systemSettingApi } from "@/api/index";
export default {
  name: "systemRestart",
  data() {
    return {
      title: "提示",
      isShow: false,
    };
  },
  methods: {
    sysReset() {
      this.isShow = true;
    },
    async reStart(type) {
      if (type === 1) {
        this.isShow = false;
        this.$message("已取消重启");
      } else {
        let res = await systemSettingApi.restart();
        if (res.success === true) {
          this.isShow = false;
          this.$message({
            message: "重启成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "重启失败",
            type: "error",
          });
        }
      }
    },
  },
};
</script>

<style lang='less' scoped>
.netBox {
  .topCon {
    height: 100%;
    background-color: #fff;
    border-radius: 12px;
    .resetCon {
      width: 300px;
      height: 100px;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%);
      .hint {
        margin-top: 30px;
        color: #ca2222;
      }
    }
  }
}
</style>
